$(function () {




  /* 
  1 初始化表单组件
  2 根据被点击文章 填充信息
    1 获取被点击的文章的id 
    2 发送请求 获取即将被点击的文章信息 - 填充数据
  3 经过我们多年开发经验得到提示
    1 必须要等到 下拉列表渲染完毕 再去获取文章详情，-> 动态设置文章的类别信息
    
  
   */

  // 2.1 获取被点击的文章的id
  const id = (new URLSearchParams(location.search)).get("id");




  // 1.1 给文件上传框绑定 值改变事件 onchange
  $("#inputCover").on("change", function () {
    // 1.1.1 获取到上传到浏览器内存中的文件
    const file = this.files[0];
    // 1.1.2 使用 一个 URL对象 将内存中的图片 生成对应的地址 
    const src = URL.createObjectURL(file);
    // 1.1.3 让图片标签显示内存中的图片即可
    $("#coverimg").prop("src", src);
  });

  // 1.2 动态渲染 文章列表下拉列表
  function getArticleCatetory() {
    $.ajax({
      url: "http://localhost:8080/api/v1/admin/category/list",
      headers: {
        Authorization: localStorage.getItem("token")
      },
      success(res) {
        if (res.code === 200) {
          const html = res.data.reduce((html, value) => html += `<option value='${value.id}'>${value.name}</option>`, '<option value="">所有分类</option>');
          $("#category").html(html);

          // 2.2 发送请求获取文章详情 填充数据
          renderArticle();



        } else {
          console.log("失败");
          console.log(res);
        }
      }
    })
  }


  // 1.2 动态渲染 文章列表下拉列表
  getArticleCatetory();


  // 1.3 初始化 layui的日期选择框
  function renderLayuiDate() {
    const laydate = layui.laydate;
    //执行一个laydate实例
    laydate.render({
      elem: '#articleDate' //指定元素
    });

  }

  // 1.3 初始化 layui的日期选择框
  renderLayuiDate();


  // 1.4 初始化  tinymce富文本编辑器 
  function renderRichText() {
    tinymce.init({
      selector: '#articleContent',
      language: 'zh_CN',//注意大小写
    });
  }

  // 1.4 初始化  tinymce富文本编辑器 
  renderRichText();


  // 2.2 发送请求获取文章详情 填充数据
  function renderArticle() {
    $.ajax({
      url: "http://localhost:8080/api/v1/admin/article/search",
      data: { id },
      headers: {
        Authorization: localStorage.getItem("token")
      }, success(res) {
        if (res.code === 200) {
          // 有四个属性 name = 接口的规定的的名称 title categoryId,cover,date
          $("[name='title']").val(res.data.title);
          $("[name='categoryId']").val(res.data.categoryId);
          $("[name='date']").val(res.data.date);
          // cover 是一个图片的在线地址 我们要设置到图片标签的src属性中
          $("#coverimg").prop("src", res.data.cover);
          // 把 content设置回富文本编辑器中 查阅文档 
          $("#articleContent").html(res.data.content);
        } else {
          console.log("失败");
          console.log(res);
        }
      }
    })

  }

  // 2.1 绑定点击事件 发布
  $(".btn-edit").on("click", function () {
    article("已发布");
  });

  // 3.1 存为草稿
  $(".btn-draft").on("click", function () {
    article("");
  })

  // 发布或者草稿
  function article(state) {
    // 2.2 获取表单中的值  formdata  （确认接口文档中字段 和 我们表单的name属性相对应）
    // 使用formdata来快速获取表单的值  title cover categoryId date
    // 剩下两个 content state 需要我们手动去拼接处理  append
    const formdata = new FormData($("#form")[0]);
    // 拼接 content 
    formdata.append("content", tinyMCE.editors["articleContent"].getContent());
    // 拼接 发布状态
    formdata.append("state", state);

    // 也要拼接id
    formdata.append("id", id);

    // 2.3 开始发送 请求 新增  
    $.ajax({
      url: "http://localhost:8080/api/v1/admin/article/edit",
      type: "post",
      data: formdata,
      // 两个额外配置 
      contentType: false,
      processData: false,
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      success(res) {
        if (res.code === 200) {
          console.log("恭喜新增成功");
          // 2.4 跳转到文章列表页面
          location.href = "article_list.html";
        } else {
          console.log("失败");
          console.log(res);
        }
      }
    })

  }


})